<template>
  <div v-if="data">
    <div class="show">
      <div class="center">
        <div class="col1-1">
          <img :src="`/${data[0].pic}`" />
        </div>
        <div class="col1-2">
          <div>
            <h3>{{ data[0].shop_name }}</h3>
          </div>
          <div class="price">
            <h3>￥160起</h3>
          </div>
          <div>
            <div class="icon1"></div>
            <h4>地址：</h4>
            <p>{{ data[0].adress }}</p>
          </div>
          <div>
            <div class="icon2"></div>
            <h4>联系电话：</h4>
            <p>{{ data[0].phone }}</p>
          </div>
          <div>
            <div class="icon3"></div>
            <h4>营业时间：</h4>
            <p>{{ data[0].open_time }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 饭店介绍 -->
    <div class="introduce">
      <div class="center">
        <div class="icon">
          <span>饭店介绍</span>
          <div></div>
        </div>

        <div v-html="data[0].detail"></div>
      </div>
    </div>
    <!-- 地图 -->
    <div class="transport">
      <div class="center">
        <div class="icon">
          <span>交通指南</span>
          <div></div>
        </div>
        <div>
          <!-- 地图预留位置 -->
          <a-map/>
        </div>
      </div>
    </div>
    <!-- 用户评价 -->
    <div class="review">
      <div class="center">
        <div class="icon">
          <span>用户评价</span>
          <div></div>
        </div>
        <ul>
          <li>
            <img src="img/user/1.jpg" alt="" />
            <p>{{ data[0].review }}</p>
            <p>2022-3-2</p>
            <textarea name="" id="" cols="40" rows="1">回复：</textarea>
          </li>
          <li>
            <img src="img/user/2.jpg" alt="" />
            <p>你好，这是你好评！</p>
            <p>2033-1-1</p>
            <textarea name="" id="" cols="40" rows="1">回复：</textarea>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import AMap from '@/components/AMap.vue';

export default {
  components: { AMap },
  data() {
    return {
      data: null, //接收一个饭店详情的数据
    };
  },
  mounted() {
    //加载饭店详情数据
    this.getData();
  },
  methods: {
    getData() {
      this.axios
        .get(`/food/food_detail?fid=${this.$route.query.fid}`)
        .then((res) => {
          console.log("查询一个饭店详情:", res);
          this.data = res.data;
        });
    },
  },
};
</script>
<style scoped src="../assets/css/foodShow.css"></style>
<style lang="scss" scoped></style>
